<template>
  <div>
    <ValidationProvider name="性别" rules="required" v-slot="{ errors }">
      <van-field
        readonly
        clickable
        label="性别"
        :value="label"
        placeholder="请选择性别"
        @click="showSexPicker = true"
        :error-message="errors[0]"
      />
    </ValidationProvider>
    <!-- 性别picker -->
    <van-popup v-model="showSexPicker" position="bottom" get-container="body" >
      <van-picker
        show-toolbar
        value-key="label"
        :columns="sexColumns"
        @cancel="showSexPicker = false"
        @confirm="onConfirmSex"
      />
    </van-popup>
  </div>
</template>

<script>
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import zh from "vee-validate/dist/locale/zh_CN";
extend("required", {
  ...required,
  message: zh.messages["required"]
});
export default {
  data() {
    return {
      sexVal: this.value,
      showSexPicker: false,
      sexColumns: [{ label: "男", value: 1 }, { label: "女", value: 2 }]
    };
  },
  computed: {
    label() {
      let item = this.sexColumns.filter(m => m.value == this.sexVal)[0];
      if (item) {
        return item.label;
      } else {
        return "";
      }
    }
  },
  props: {
    value: {
      required: true
    }
  },
  methods: {
    // 点击性别picker确认
    onConfirmSex(obj) {
      this.sexVal = obj.value;
      this.showSexPicker = false;
      this.$emit('input',obj.value);
    }
  },
  components: {
    ValidationProvider
  }
};
</script>

<style lang='scss'>
</style>
